// import classnames from 'classnames';

import React,{useState} from 'react';
// import { Link } from 'react-router-dom';

import { useGetGoodsQuery, Goods,useAddGoodMutation,useModifysGoodMutation } from '../store/apiSlice';
import GoodsForm from './goodsForm';
import { Outlet } from 'react-router-dom';
interface PostExcerptProps {
  goods: Goods
}


// Go back to passing a `post` object as a prop
const PostExcerpt = ({ goods }: PostExcerptProps) => {
  const [isEdit, setIsEdit] = useState(false);
  const [modifyGood, { isLoading:modifyLoading }] = useModifysGoodMutation();
  const changeGood = async (good:Goods) => {
    try {
      await modifyGood({...good,name:'修改的name'}).unwrap();
    } catch (error) {
      console.error('Failed to save the post: ', error);
    }
  };

  return (
    <article className="post-excerpt" key={goods.id}>
      <p className="post-content">{goods.name}<button onClick={()=>changeGood(goods)}>修改</button></p>

      <button onClick={() => setIsEdit(true)}>查看详情</button>
      <button onClick={() => setIsEdit(false)}>取消</button>

      {isEdit&&<GoodsForm goods={goods}></GoodsForm>}
    </article>
  )
}

export const GoodsList = () => {
  // Calling the `useGetPostsQuery()` hook automatically fetches data!
  const {
    data:goodsData,//服务器对最近成功的缓存条目数据的实际响应内容。在收到响应之前，此字段将处于未定义状态。
    // currentData：//基本不用，当前查询“参数”的响应内容（最新数据）。如果查询参数已更改并且由于没有现有缓存条目而启动请求，参数改变，值会切换到undefined状态。
    isLoading,//第一次加载....一个布尔值，指示此钩子当前是否正在向服务器发出第一个请求，因为还没有任何数据。（请注意，如果参数更改以请求不同的数据，isLoading将保持 false。
    // isFetching,//加载就会变....一个布尔值，指示钩子当前是否正在向服务器发出任何请求，
    isSuccess,//一个布尔值，指示钩子是否成功发出请求并有可用的缓存数据（即，现在应该定义data）
    // isUninitialized,//请求是否未初始化
    // status,
    isError,//一个布尔值，指示最后一个请求是否有错误
    error,//序列化的错误对象，出错才返回
    refetch//重新加载数据
  } = useGetGoodsQuery(
    // null,{
  //   pollingInterval:0,//轮询数据，间隔多久发一次请求，实时获取最新数据
  //   selectFromResult:(result:resType) => {
  //     return result.data.rows;
  //   }
  // skip:true,//是否跳过该功能，默认false，新增修改时候设置，比如!id判断ID不存在时再调用，否则跳过，用于组件中新增修改逻辑
      // refetchOnMountOrArgChange: false, //是否每次都重新加载数据
      // refetchOnFocus: false, //是，是否在重新获取焦点时重载数据
      // refetchOnReconnect: false, //是否在断线后重新加载数据


      // refetchIntervalInBackground: false, //是否在后台重新加载数据
      // suspense: false, //是否使用 suspense，默认为 true，在 React Suspense 环境中使用此功能
      // cacheTime: 5000, // 5 seconds before the query refetches data from the server
      // fetchPolicy: 'cache-and-network', // 'cache-first', 'network-only', 'cache-and-network', 'no-cache', 'no-cache-bail', 'cache-first', 'network-only'
      // notifyOnNetworkStatusChange: false, // 网络状态发生变化时是否通知
      // errorPolicy: 'all', // 'none', 'all', 'ignore-errors'
      // pause: false, // 若为 true，在 fetchPolicy 为 'cache-and-network' 时，在断线时不重新加载数据
      // partialRefetchOnFailure: false, // 若为 true，在 fetchPolicy 为 'cache-and-network' 时，在失败时部分重新加载数据
      // staleTime: 1000, // 1 second before the query refetches data from the server if it's considered stale
      // cacheKeyFn: (arg: any) => { return JSON.stringify(arg) }, // 自定义 cache key
      // enableFallback: false, // 若为 true，在 fetchPolicy 为 'cache-and-network' 时，在断线时使用 fallback 值代替数据
      // fallbackData: null, // 若 fetchPolicy 为 'cache-and-network' 时，在断线时返回的 fallback 值
      // retry: (count: number, error: Error) => { return new Promise((resolve, reject) => { setTimeout(() => resolve(), 1000) }) }, // 重试函数，返回一个 Promise，若返回 Promise 则会重新执行 fetchPolicy，否则会忽略 retry 选项
      // retryDelay: (attemptNumber: number) => { return attemptNumber * 1000 }, // 重试延��函数，返回一个数字，表示重试的间隔时间
      // shouldFetchOnMount: true, // 若为 true，在第一次 mount 时重新加载数据

// }
)


  const [addGood, { isLoading:addloading }] = useAddGoodMutation();

  // const canSave = [title, contentInput, userId].every(Boolean) && !isLoading;

  const handleSubmit = async (e: React.FormEvent<any>) => {
    // Prevent server submission
    e.preventDefault()

    const { elements } = e.currentTarget
    const name = elements.name.value;
    const price = elements.price.value;

    const form = e.currentTarget

    try {
      await addGood({ name,
        price,
        pre_price: 22,
        introduce:"简介",
        num: 32 }).unwrap();

      form.reset()
    } catch (err) {
      console.error('Failed to save the post: ', err)
    }
  }

  let content: React.ReactNode

  // Show loading states based on the hook status flags
  if (isLoading) {
    content =<div>loading....</div>
  } else if (isSuccess) {
    // .data.rows
    content = goodsData.data.rows.map(goods => <PostExcerpt key={goods.id} goods={goods} />);
    // const containerClassname = classnames('posts-container', {
    //   disabled: isFetching
    // })

    // content = <div className={containerClassname}>{renderedPosts}</div>
  } else if (isError) {
    content = <div>{error.toString()}</div>
  }

  return (
    <section className="posts-list">
      <h2>Posts</h2>
      <form onSubmit={handleSubmit}>
        <label htmlFor="name">Post name:</label>
        <input type="text" id="name" defaultValue="" required />
        <label htmlFor="price">价格:</label>
        <textarea
          id="price"
          name="price"
          defaultValue=""
          required
        />
        <button disabled={addloading}>Save Post</button>
      </form>

      <button onClick={refetch}>Refetch Posts</button>
      {content}

      <Outlet />
    </section>
  )
}